import { BetRecordEmpty } from "@/pages/BetRecordPage/components/BetRecordEmpty"
import styled from "@emotion/styled"
import { useNavigate } from "react-router-dom"
import { Swiper, SwiperSlide } from "swiper/react"
import { RefGameListItem } from "@/apis/home_page_constant_types"
import { CategoryGameLabel } from "./CategoryGameLabel"
import { GameCardItem } from "./GameCardItem"
const GameContainer = styled.section`
    margin-bottom: 20rem;
`

const List = styled.div``

interface Props {
    link?: string
    title: string
    games: RefGameListItem[]
}

export const Games = ({ title = "", games = [], link }: Props) => {
    const navigate = useNavigate()
    return (
        <GameContainer>
            <CategoryGameLabel
                onArrowClick={() => {
                    if (link) {
                        navigate(link.replace("/games/", "/s-game/category/"))
                    }
                }}
                showArrow={!!link}
            >
                {title}
            </CategoryGameLabel>
            {games.length === 0 ? (
                <BetRecordEmpty />
            ) : (
                <List>
                    <Swiper
                        loop={false}
                        slidesPerView={3}
                        spaceBetween={"6rem"}
                        style={{
                            paddingLeft: "12rem",
                            paddingRight: "12rem",
                        }}
                    >
                        {games.map((game, idx) => {
                            return (
                                <SwiperSlide key={`game_card_item_${idx}`}>
                                    <GameCardItem {...game} />
                                </SwiperSlide>
                            )
                        })}
                    </Swiper>
                </List>
            )}
        </GameContainer>
    )
}
